<!DOCTYPE HTML>
<html class="ui-viewport-750" lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>向雨露</title>
        <meta name="author" content="duky" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="format-detection" content="telephone=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="cleartype" content="on">

        <script>
            // 这个是判断是不是电脑
            ! function( navigator ) {
                var userAgent = navigator.userAgent;
                    documentElement = document.documentElement;
                if ( userAgent.match( /micromessenger\/5/gi ) ) {
                    documentElement.className += " mobile wx_mobile wx_mobile_5";
                } else if ( userAgent.match( /micromessenger/gi ) ) {
                    documentElement.className += " mobile wx_mobile";
                } else if ( userAgent.match( /ucbrowser/gi ) ) {
                    documentElement.className += " mobile uc_mobile";
                } else if ( /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( userAgent.toLowerCase() ) ) {
                    documentElement.className += " mobile";
                } else if ( userAgent.toLowerCase().match( /msie/gi ) && ( parseFloat( userAgent.toLowerCase().match( /msie ([0-9]{1,}[\.0-9]{0,})/i )[1] || 999 ) < 9 ) ) {
                    documentElement.className += " pc pc-ie pc-ie8";
                } else if ( userAgent.toLowerCase().match( /msie/gi ) || navigator.msPointerEnabled || navigator.pointerEnabled ) {
                     documentElement.className += " pc pc-ie";
                } else {
                    documentElement.className += " pc";
                }
            }( navigator );
            // meta
            ! function( userAgent ) {
                var screen_w = parseInt(window.screen.width),
                    scale = screen_w / 750;
                if ( /Android (\d+\.\d+)/.test( userAgent ) ) {
                    var version = parseFloat( RegExp.$1 );
                    document.write( version > 2.3
                        ? '<meta name="viewport" content="width=750, minimum-scale = ' + scale + ", maximum-scale = " + scale + ', target-densitydpi=device-dpi">'
                        : '<meta name="viewport" content="width=750, target-densitydpi=device-dpi">' );
                } else {
                    document.write( '<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">' );
                }
            }( navigator.userAgent );
        </script>
 
        <link rel="stylesheet" type="text/css" href="./css/frozen.css">
        <link rel="stylesheet" type="text/css" href="./css/parallax.css">
        <script src="./js/zepto.min.js"></script>
        <script type="text/javascript" src="http://www.youziku.com/webfont/FastJS/7f617034b820466a94329b65a53bc06f.js"></script>

        <style type="text/css">
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        .loading{
            width: 140px;
            margin: 450px auto;
            font-size: 40px;
        }
        .ui-loading{
            width: 40px;
            height: 40px;
            background-size: auto 40px;
            -webkit-background-size: auto 40px;
            -webkit-animation: rotate 1s steps(6) infinite;
        }
        .hide-pic{
            width: 0;
            height: 0;
        }
        section[data-id="1"] {
            background-image: url("./img/xyl/5.jpg");
            background-size: 100% 100%;
        }
        section[data-id="2"] {
            background-image: url("./img/xyl/1.jpg");
            background-size: 100% 100%;
        }
        section[data-id="3"] {
            background-image: url("./img/xyl/2.jpg");
            background-size: 100% 100%;
        }
        section[data-id="4"] {
            background-image: url("./img/xyl/3.jpg");
            background-size: 100% 100%;
        }
         section[data-id="5"] {
            background-image: url("./img/xyl/4.jpg");
            background-size: 100% 100%;
        }
        .parallax-arrow{
            width: 50px !important;
            height: 30px !important;
           background-size: 100% 100% !important;
        }
        @font-face
        {
        font-family: myFirstFont;
        src: url('./font/DFPHannotateW7-GB.ttf'),
             url('./font/DFPHannotateW7-GB.eot'); /* IE9+ */
        }
        .firstPage{
            position: absolute;
            min-width: 80%;
            min-height: 150px;
            top: 60px;
            left: 60px;
            font-size: 50px;
            padding: 10px;
            color: #303030;
            background: rgba(255,255,255,0.7);
        }
        .firstPage .third{
            position: absolute;
            right: 0px;
        }
        .secondPage,.thirdPage,.lastPage{
            position: absolute;
            min-width: 80%;
            min-height: 225px;
            top: 60px;
            left: 60px;
            font-size: 50px;
            padding: 10px;
            color: #303030;
            background: rgba(255,255,255,0.7);
        }
        /*.thirdPage{
            position: absolute;
            top: 30px;
            left: 30px;
            font-size: 50px;
            color: #303030;
        }
        .lastPage{
            position: absolute;
            top: 40px;
            left: 70px;
            font-size: 50px;
            color: #303030;
        }*/
        .lastPage .company{
            color: #34d098 !important;
        }
        .company-intro{
            position: absolute;
            /*background-color: #f8f9fa;*/
            width: 90%;
            top:40px;
            right: 30px;
            font-size: 38px;
            color: #303030;
        }
        .join{
            position: absolute;
            top:48%;
            left: 23%;
            width: 80px;
            height: 270px;
            /*background-color: red;*/
            transform:rotate(-9deg);
            -webkit-transform:rotate(-9deg);
            -ms-transform:rotate(-9deg);
            -moz-transform:rotate(-9deg);
            -o-transform:rotate(-9deg);
        }
        .point{
            position: absolute;
            top:62%;
            left: 33%;
            width: 80px;
            height: 80px;
            background-image: url("./img/lastPage/cursor.png");
            background-size: 100% 100%;
            -moz-animation:flash 5s ease-in-out infinite; /* Firefox */
            -webkit-animation:flash 5s ease-in-out infinite; /* Safari and Chrome */
            -o-animation:flash 5s ease-in-out infinite; /* Opera */
        }
        .dialog-content{
            width: 700px;
            height: 980px;
            background-image: url("./img/dialog/white_bg.png");
            background-size: 100% 100%;
        }
        .dialog-content .company{
            /*margin-top: 70px !important;*/
            padding-top: 70px !important;
            margin-left: 70px;
            color: #f67865;
            font-size: 50px;
        }
        .dialog-content .need-text{
            margin-top: 26px;
            margin-left: 70px;
            color: #303030;
            font-size: 50px;
        }
        .dialog-content .job-name{
            margin-top: 74px;
            width: 100%;
            text-align: center;
            color: #303030;
            font-size: 70px;
        }
        .dialog-content .reward{
           /* position: absolute;*/
            margin-top:40px;
            margin-left: 230px;
            font-size: 110px;
            color:#f67865;
        }
        .reward-text{
            font-size: 50px !important;
        }
        .dialog-btn{
            width: 620px;
            height: 100px;
        }
        .get{
            
            background-image: url("./img/dialog/jiebang.png");
            background-size: 100% 100%;
            margin: 0 auto;
            margin-top: 80px;
        }
        .share{
            background-image: url("./img/dialog/share.png");
            background-size: 100% 100%;
            margin: 0 auto;
            margin-top: 26px;
        }
        .share-dialog{
            background-image: url("./img/share.svg") !important;
            background-size: 100% 100% !important;
        }
        @-webkit-keyframes fadeIn {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }

        @keyframes fadeIn {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }

        @-webkit-keyframes fadeOut {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }

        @keyframes fadeOut {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @-webkit-keyframes flash {
          0%, 50%, 100% {
            opacity: 1;
          }

          25%, 75% {
            opacity: 0;
          }
        }

        @keyframes flash {
          0%, 50%, 100% {
            opacity: 1;
          }

          25%, 75% {
            opacity: 0;
          }
        }
        .progress-bar{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            left: 0;
            z-index: 20;
            width: 100%;
            height: 100%;
            background:rgba(255,255,255,1);
            overflow: hidden;
        }
        .secondPage .last{
            position: absolute;
            right: 0;
        }
        
        </style>
    </head>
    <body>
        <div class="progress-bar">
            <div class="loading">
                <div class="ui-loading-wrap">
                    <p>加载中</p>
                    <i class="ui-loading"></i>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div class="pages">
            <!-- 第一屏 -->
            <section class="page">
                <div class="firstPage">
                    <div class="first" data-animation="fadeIn" data-delay="0" data-duration="1000" data-timing-function="ease-in-out">大家好，我叫向雨露.</div>
                    <div class="second" data-animation="fadeIn" data-delay="1000" data-duration="1000" data-timing-function="ease-in-out">看！我的自拍好不好看。</div>
                </div>
            </section>
            <!-- 第二屏 -->
            <section class="page">
                <div class="secondPage">
                    <div class="first" data-animation="fadeIn" data-delay="0" data-duration="1000" data-timing-function="ease-in-out">当我这么文静的站着，</div>
                    <div class="second" data-animation="fadeIn" data-delay="1000" data-duration="1000" data-timing-function="ease-in-out">是不是觉得暴风雨</div>
                    <div class="third" data-animation="fadeIn" data-delay="2000" data-duration="1000" data-timing-function="ease-in-out">马上就要来临了。</div>
                </div>
            </section>
            <!-- 第三屏 -->
            <section class="page">
               <div class="thirdPage">
                    <div class="first" data-animation="fadeIn" data-delay="0" data-duration="1000" data-timing-function="ease-in-out">不知道你们有没有发觉</div>
                    <div class="second" data-animation="fadeIn" data-delay="1000" data-duration="1000" data-timing-function="ease-in-out">其实我的背影，&nbsp;</div>
                    <div class="third" data-animation="fadeIn" data-delay="2000" data-duration="1000" data-timing-function="ease-in-out">也是很迷人的。</div>
                </div>
            </section>
            <!-- 第四屏 -->
            <section class="page">
                <!-- <div class="lastPage" data-animation="fadeOut" data-delay="4200" data-duration="2000"> -->
                <div class="lastPage">

                    <div class="first" data-animation="fadeIn" data-delay="0" data-duration="1000" data-timing-function="ease-in-out">我看到这张照片</div>
                    <div class="second" data-animation="fadeIn" data-delay="1000" data-duration="1000" data-timing-function="ease-in-out">有没有发现我笑的很美</div>
                    <div class="third" data-animation="fadeIn" data-delay="2000" data-duration="1000" data-timing-function="ease-in-out">反正我是这么觉得。</div>
                </div>
            </section>

             <section class="page">
                <!-- <div class="lastPage" data-animation="fadeOut" data-delay="4200" data-duration="2000"> -->
                <div class="lastPage">

                    <div class="first" data-animation="fadeIn" data-delay="0" data-duration="1000" data-timing-function="ease-in-out">我喜欢看到你开心的样子。</div>
                    <div class="second" data-animation="fadeIn" data-delay="1000" data-duration="1000" data-timing-function="ease-in-out">感觉和你呆在一块挺开心的。</div>
                    <div class="third" data-animation="fadeIn" data-delay="2000" data-duration="1000" data-timing-function="ease-in-out">谢谢你。</div>
                </div>
            </section>
        </div>
    </div>

</body>
<script type="text/javascript">
    $('[data-animation]').css({
        'display':'none'
    })
</script>

    <script src="./js/parallax.js"></script>
    <script src="./js/frozen.js"></script> 
    <script>
        $('.pages').parallax({
            arrow: true
        });
        $(".join").on("click",function(){
            $(".common-dialog").dialog("show");
        })
        $(".common-dialog").on("click",function(){
            $(".common-dialog").dialog("hide");
        })
        $(".get").on("click",function(){
            window.location.href="http://itunes.apple.com/cn/app/da-zhong-dian-ping-mei-shi/id351091731?mt=8&utm_source=__30i9";
        })
        $(".share").on("click",function(){
            $(".share-dialog").dialog("show");
        })
        $(".share-dialog").on("click",function(){
            $(".share-dialog").dialog("hide");
        })
        $(window).on("load",function(){
            $('.progress-bar').hide();    
        })
        $(".company").on("click",function(){
            $(".lastPage").css({
                'display': 'block',
                
                // 为了兼容不支持贝塞尔曲线的动画，需要拆开写
                // 严格模式下不允许出现两个同名属性，所以不得已去掉 'use strict'

                '-webkit-animation-name': "fadeOut",
                '-webkit-animation-duration': 1000 + 'ms',
                '-webkit-animation-timing-function': 'ease-in-out',
                '-webkit-animation-delay': 0 + 'ms',
                '-webkit-animation-fill-mode': 'both'
            })
            $(".company-intro").css({
                'display': 'block',
                
                // 为了兼容不支持贝塞尔曲线的动画，需要拆开写
                // 严格模式下不允许出现两个同名属性，所以不得已去掉 'use strict'

                '-webkit-animation-name': "fadeIn",
                '-webkit-animation-duration': 1000 + 'ms',
                '-webkit-animation-timing-function': 'ease-in-out',
                '-webkit-animation-delay': 1000 + 'ms',
                '-webkit-animation-fill-mode': 'both'
            })
        })
    </script>
    <script  type="text/javascript">
    $youziku.load(".page", "7f617034b820466a94329b65a53bc06f", "minijianyaya");
    /*[$youziku.load("#id2", "7f617034b820466a94329b65a53bc06f", "minijianyaya");]*/
    /*[$youziku.load(".class1", "7f617034b820466a94329b65a53bc06f", "minijianyaya");]*/
    /*[$youziku.load(".class1", "7f617034b820466a94329b65a53bc06f", "minijianyaya");]*/
    /*[．．．]*/
    $youziku.draw();
    </script>
</html>